<template>
	<view class="content">
		
		<editUserModal :isShow="editModal" @closeEdit="closeEdit" @editSuccess="editSuccess"></editUserModal>
		
		<MessageScroll :themeColor='themeColor'></MessageScroll>
		<view class="list-box box-s" style="margin-top: 24rpx;">
			<view class="list-top f-r-b" >
				<text class="th">行情仅供参考</text>
				<view class="f-r-e">
					<uni-icons type="info" size="18" color="#fff"></uni-icons>
					<text class="th">本站非交易平台</text>
				</view>
			</view>
			<view class="list-table f-r-s f-r-w">
				<view class="list-item" v-for="(item,index) in tableList" :key="item.id">
					<ScrollList  :interval="index<6? 3000 :4000" :list="item" ></ScrollList>
				</view>
			</view>
		</view>
		
		
		<view class="type-list">
			<view class="type-li" v-for="(item,index) in barList" :key="index" :style="{'background-image':'url('+http_url+item.categoryImg+')'}" @click="open_url('/pages/todayDetail/index',{id:item.id,name:item.categoryName})" 
			  >
				<view class="bg"></view>
				<view class="con">
					<view class="line"></view>
					<view class="name">{{item.categoryName}}</view>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<view class="jlq" @click="tovipdetail('/pages/index/wechat',{},'needLogin')">
			<image class="jlqimg" src="../../static/image/jiaoliuqun.png"></image>
		</view>
		<view class="fixed code bggradient" @click="tovipdetailWechat('/pages/index/wechat',{},'needLogin')">
			<uni-icons type="chatboxes-filled" size="30" color="#fff"></uni-icons>
		</view>
		<view class="fixed tel bggradient" @click="tovipdetail('/pages/index/calculator',{},'needLogin')">
			<uni-icons type="gear-filled" size="30" color="#fff"></uni-icons>
		</view>
		
		<view style="height: 200rpx;"></view>
		
		
	</view>
</template>

<script>
	import editUserModal from '@/components/xghc-editUserModal/index.vue';
	import MessageScroll from "@/component/MessageTitle.vue";
	import ScrollList from '@/component/swiperlist.vue';
	export default{
		components:{
			MessageScroll,ScrollList,editUserModal,
		},
		computed: {
		  themeColor() {
		    return this.$themeColor;
		  }
		},
		data(){
			return{
				http_url:'',
				isLogin:false,
				barList:[],
				tableList:[],
				editModal:false, //授权昵称和头像
				userinfo:{
					avatar:'',
					nickName:'',
					isVip:null,//是否VIP 
				}
				
				
			
			}
		},
		
		onLoad(option) {
			if(option.referralCode){
				console.log("推给我得用户得推广码",option.referralCode);
				uni.setStorageSync("referralCode",option.referralCode);
				
			}
			if(option.scene){
				console.log("option.scene",option.scene);
				 let referralCode=option.scene;
	             console.log("扫码推给我得用户得推广码",referralCode);
				 uni.setStorageSync("referralCode",referralCode);
				 
				 
			}
			this.http_url=this.$http_url;
			this.getBarData();
			
			
		},
		onShow() {
			this.getTableData();
			this.getCommonData();
			this.getconfigData();
			let userinfo=uni.getStorageSync('userinfo');
			console.log("用户信息", userinfo);
			if(userinfo){
				 this.isLogin=true;
				 this.userinfo=userinfo;
				 if(userinfo.nickName){
					 // console.log("昵称",userinfo.nickName);
				 }else{
					 this.editModal = true;
				 }
			 }else{
				this.isLogin=false;
			 }
		},
		methods:{
			editSuccess(data) {
				this.editModal = false;
				console.log(data);
				
			},
			closeEdit() {
				this.editModal = false;
			},
			//获取通用配置信息
			getCommonData(){
				let opts={
				    url:'/market/getCommonCodePoint',
				    method: 'get'
				};
				this.$http(opts,{}).then(res=>{ 
					// console.log(res.data);
					uni.setStorageSync('codeImgInfo',res.data);
				})
				
			},
			getconfigData(){
				let opts={
				    url:'/market/getFixationConfigData',
				    method: 'get'
				};
				this.$http(opts,{}).then(res=>{ 
					console.log(res.data);
					uni.setStorageSync('configData',res.data);
				})
			},
			getBarData(){
				let opts={
				    url:'/market/getCategoryList',
				    method: 'get'
				};
				this.$http(opts,{}).then(res=>{ this.barList=res.data;})
			},
			getTableData(){
				let opts={
				    url:'/market/getIndexShowList',
				    method: 'get'
				};
				this.$http(opts,{}).then(res=>{
					this.tableList=res.data;

				})
			},
			
			//获取用户信息，判断是否登录
			//跳转
			tovipdetail(url,param){
				if(!this.isLogin){
					uni.showToast({
						title:'请登录后体验完整功能',
						icon:'none',
					})
					return false;
				}
				if(!this.userinfo.isVip){
					uni.showModal({
						title: '温馨提示',
						content: '请购买VIP会员后查看',
						cancelText:'取消',
						confirmText:'购买',
						confirmColor:this.$themeColor,
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/main/buyVip'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					this.open_default_format_url(url,param)
					
				}
			},
			//获取用户信息，判断是否登录并给出对应提示
			//跳转
			tovipdetailWechat(url,param){
				if(!this.isLogin){
					uni.showToast({
						title:'请登录后体验完整功能',
						icon:'none',
					})
					return false;
				}
				if(!this.userinfo.isVip){
					uni.showToast({
						title:'扫描二维码联系客服体验完整功能!',
						icon:'none',
					})
					let that = this;
					setTimeout(function() {
					    console.log('1秒的定时器');
						// 客服二维码
						let codeFilePath = uni.getStorageSync('configData').adminWxQrcode;
						let url=that.$prefix(codeFilePath);
						let list=[];
						list.push(url);
						uni.previewImage({
						     urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了     		
						     success: function(res) { 
						     },
						     complete: function(res) {
						        
						     },
						 });
					}, 1500);
				}else{
					this.open_default_format_url(url,param);
				}
			},
			open_url(url,param){
				if(this.userinfo.isVip||!this.isLogin){
					this.open_default_format_url(url,param)
				}else{
					uni.showModal({
						title: '温馨提示',
						content: '请购买VIP会员后查看',
						cancelText:'取消',
						confirmText:'购买',
						confirmColor:this.$themeColor,
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/main/buyVip'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				
			},
			open_default_format_url(url,param){
				
				if (JSON.stringify(param) != "{}") {
					url += '?';
					for (let k in param) {
						url += k + '=' + param[k] + '&';
					}
					url = url.substring(0, url.length - 1);
				}
				
				uni.navigateTo({
					url: url,
					fail: (e) => {
						console.info(e)
					}
				});
			},
		},
		
	}
</script>
<style>
	page{
		background: #f8f8f8;
	}
</style>
<style lang="less" scoped>
	.content{
		.list-box{
			border-radius: 10rpx;
			overflow: hidden;
			
			
			
			.list-top{
				height: 76rpx;
				padding: 0 20rpx;
				background-image: linear-gradient( to bottom, #ff6700, #f10);
				color: #fff;
				font-weight: 400;
				font-size: 26rpx;
			}
			.list-table{
				// padding: 0 20rpx;
				background: #fff;
				.list-item{
					height: 80rpx;
					background: #ff000030;
					width: calc(50% - 5rpx);
					
				}
				.list-item:nth-of-type(2n+1){
					margin-right: 5rpx;
					
				}
				.list-item:nth-of-type(2n){
					margin-left: 5rpx;
					
				}
				
				
			}
		}
		.type-list{
			.type-li{
				width: 100%;
				height: 200rpx;
				background-size: cover;
				background-position: center;
				border-radius: 20rpx;
				margin-top: 24rpx;
				overflow: hidden;
				position: relative;
				.bg{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: #00000060;
				}
				.con{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 10;
					.line{
						width: 80rpx;
						height: 2rpx;
						background: #fff;
						
					}
					.name{
						color: #fff;
						margin: 0 16rpx;
						font-size: 40rpx;
						font-weight: 500;
						
						
					}
				}
				
			}
		}
	    .fixed{
			position: fixed;
			right: 20rpx;
			bottom: 300rpx;
			z-index: 100;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		.bggradient{
			background-image: linear-gradient( to bottom, #ff6700, #f10);
		}
		.tel{
			bottom: 180rpx;
		}
		.jlq {
			position: fixed;
			right: 20rpx;
			z-index: 100;
			width: 120rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			bottom: 385rpx;
		}
		.jlqimg{
			width: 130rpx;
			height: 70rpx;
			background-size: 100% 100%;
		}
	   
	}
	
</style>